<template>
  <div class="Home">
    <a-row :gutter="30">
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>网点总数:</span>
              <span>{{branchCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>点位总数:</span>
              <span>{{posCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>

      <a-col class="gutter-row" :span="6">
        <div class="gutter-box gutter-box-four">
          <a-card>
            <p class="downline">
              <span>不在线设备数:</span>
              <span>2</span>
            </p>
            <p class="line">
              <span>在线设备数</span>
              <span>0</span>
            </p>
          </a-card>
        </div>
      </a-col>

      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>待处理事项:</span>
              <span>{{posCount}}</span>
            </p>
          </a-card>
        </div>
      </a-col>
    </a-row>

    <a-tabs type="card" style="margin-top:2%;">
      <a-tab-pane tab="今日数据" key="1">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单量</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/总用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">总用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/新增用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">新增用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">成交用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="昨日数据" key="2">
         <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单量</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/总用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">总用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/新增用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">新增用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">成交用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="本周数据" key="3">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单量</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/总用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">总用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/新增用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">新增用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">成交用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="本月数据" key="4">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单量</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/总用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">总用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/新增用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">新增用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">成交用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="自定义" key="5">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">销售额</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">订单量</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">客单价</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>

          <a-row :gutter="30" style="margin-top:2%;">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/总用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">总用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/新增用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">新增用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/用户@2x.png" alt />
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">成交用户数</a-col>
                      <a-col :span="5">
                        <!-- <a-icon type="info-circle"/> -->
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>


    </a-tabs>
    

    <!-- 销售额折线图 -->
    <a-card style="margin-top:2%">
      <div id="line_main" :style="{width: '95%', height: '460px'}"></div>
    </a-card>
    <!-- 销售额折线图 -->

    <!--订单量折线图 -->
    <a-card style="margin-top:2%">
      <div id="order_count" :style="{width: '95%', height: '460px'}"></div>
    </a-card>
    <!--订单量折线图 -->

    <!--客单价折线图 -->
    <a-card style="margin-top:2%">
      <div id="per_sales" :style="{width: '95%', height: '460px'}"></div>
    </a-card>
    <!--客单价折线图 -->

    <!--总用户数折线图 -->
    <a-card style="margin-top:2%">
      <div id="total" :style="{width: '95%', height: '460px'}"></div>
    </a-card>
    <!--总用户数折线图 -->

    <!--新增用户数折线图 -->
    <a-card style="margin-top:2%">
      <div id="adduser" :style="{width: '95%', height: '460px'}"></div>
    </a-card>
    <!--新增用户数折线图 -->

    <!--成交用户数折线图 -->
    <a-card style="margin-top:2%">
      <div id="bargain" :style="{width: '95%', height: '460px'}"></div>
    </a-card>
    <!--成交用户数折线图 -->

    <a-card style="margin-top:2%">
      <a-tabs defaultActiveKey="1">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <div class="extra-item">
            <a>今日</a>
            <a>近七天</a>
            <a>近30天</a>
          </div>
          <a-range-picker :style="{width: '256px'}" />
        </div>

        <a-tab-pane tab="网点销售排行" key="1">
            <ve-histogram :data="chartData" :colors="chartColors" :extend="chartExtend"></ve-histogram>
          <!-- <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
            <v-tooltip />
            <v-axis data-key="type" :label="label" :tickLine="tickLine"></v-axis>
            <v-axis data-key="value" :label="labelFormat" :title="title"></v-axis>
            <v-interval position="type*value" color="cat" :opcaity="1"></v-interval>
            <v-guide
              type="text"
              :top="true"
              :position="pos1"
              content="家具"
              :style="style"
              :offsetY="40"
            />
            <v-guide
              type="text"
              :top="true"
              :position="pos2"
              content="技术"
              :style="style"
              :offsetY="40"
            />
            <v-guide
              type="text"
              :top="true"
              :position="pos3"
              content="办公用品"
              :style="style"
              :offsetY="40"
              :offsetX="20"
            />
            <v-guide type="line" :start="start1" :end="end1" :lineStyle="lineStyle" />
            <v-guide type="line" :start="start2" :end="end2" :lineStyle="lineStyle" />
          </v-chart> -->
        </a-tab-pane>
        <a-tab-pane tab="点位销售排行" key="2" forceRender>
          <pre>
          <!-- Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2
          Content of Tab Pane 2 -->
          </pre>
        </a-tab-pane>
        <a-tab-pane tab="商品销售排行" key="3">
          <pre>
          <!-- Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3
          Content of Tab Pane 3 -->
          </pre>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
// const data = [
//   {
//     type: "书架",
//     value: 48000,
//     cat: "家具"
//   },
//   {
//     type: "椅子",
//     value: 36000,
//     cat: "家具"
//   },
//   {
//     type: "桌子",
//     value: 9000,
//     cat: "家具"
//   },
//   {
//     type: "复印机",
//     value: 30500,
//     cat: "技术"
//   },
//   {
//     type: "电话",
//     value: 22000,
//     cat: "技术"
//   },
//   {
//     type: "配件",
//     value: 12000,
//     cat: "技术"
//   },
//   {
//     type: "纸张",
//     value: 25000,
//     cat: "办公用品"
//   },
//   {
//     type: "笔",
//     value: 17000,
//     cat: "办公用品"
//   },
//   {
//     type: "美术",
//     value: 8000,
//     cat: "办公用品"
//   },
//   {
//     type: "收纳",
//     value: 2000,
//     cat: "办公用品"
//   }
// ];

// const scale = [
//   {
//     dataKey: "value",
//     alias: "占比（%）"
//   }
// ];

// const label = {
//   textStyle: {
//     fill: "#aaaaaa"
//   }
// };

// const tickLine = {
//   alignWithLabel: false,
//   length: 0
// };

// const labelFormat = {
//   textStyle: {
//     fill: "#aaaaaa"
//   },
//   formatter: function formatter(text) {
//     return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
//   }
// };

// const title = {
//   offset: 70
// };

// const lineStyle = {
//   stroke: "#d9d9d9",
//   lineDash: [0, 0]
// };

// const style = {
//   fill: "#c0c0c0",
//   fontSize: 12,
//   fontWeight: "300",
//   textAlign: "center"
// };

// echarts图表的使用
var echarts = require("echarts");
// console.log(echarts);
export default {
  name: "Home",
  data() {
    //柱状图的样式
      this.chartColors=[
        "#FF796E"
      ]
      this.chartExtend={
        title:{
            text:"今日网点销售排行" ,
            left: "33%",
            top: 3,
            width: 110,
            
            textStyle: {
              color: "#FF796E",
              "font-weight": 100,
              fontSize: 16 ,
              opacity:0.2,
              "font-family":"SourceHanSansCN-Light"
            }
          },
              grid:{
                    x:25,
                    y:80,
                    x2:5,
                    y2:20,
                    borderWidth:1
                }}
    //柱状图的样式
    return {
      branchCount: "",
      posCount: "",
      deviceCount: "",

      //柱状图的数据
        chartData: {
          columns: ['日期', '销售额',  '排行'],
          rows: [
            { '日期': '网点1', '销售额': 8000, '排行': 1 },
            { '日期': '网点2', '销售额': 7000, '排行': 2 },
            { '日期': '网点3', '销售额': 6000,'排行': 3 },
            { '日期': '网点4', '销售额': 5000,  '排行': 4 },
            { '日期': '网点5', '销售额': 4000,  '排行': 5 },
            { '日期': '网点6', '销售额': 3000,  '排行': 6 },
              { '日期': '网点7', '销售额': 2000,  '排行':7 },
                { '日期': '网点8', '销售额': 1000,  '排行': 8 },
                  { '日期': '网点9', '销售额': 500,  '排行': 9 }
          ]
        },



      //柱状图的数据
      // data,
      // scale,
      // height: 400,
      // style,
      // label,
      // tickLine,
      // labelFormat,
      // title,
      // lineStyle,
      // pos1: ["椅子", "min"],
      // pos2: ["电话", "min"],
      // pos3: ["笔", "min"],
      // start1: ["30%", "100%"],
      // end1: ["30%", "120%"],
      // start2: ["60%", "100%"],
      // end2: ["60%", "120%"]
    };
  },
  components: {},
  methods: {
    // 设备概况统计
    deviceStats() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/homepage/deviceStats",
        data: {
          loginToken: this.$store.state.loginToken
        }
      }).then(res => {
        console.log(res);
        this.branchCount = res.data.data.branchCount;
        this.posCount = res.data.data.posCount;
        console.log(this.posCount);
        this.deviceCount = res.data.data.deviceCount;
      });
    },
    //销售额折线图
    line_ko() {
      var line_myChart = this.echarts.init(
        document.getElementById("line_main")
      );
      console.log(line_myChart);

      line_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日销售额变化趋势",
            left: "center",

            textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "销售额/元",
            itemStyle: {
              normal: {
                color: "#46BB36",
                lineStyle: {
                  color: "#46BB36"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    //订单量折线图
    order_count() {
      var order_myChart = this.echarts.init(
        document.getElementById("order_count")
      );
      // console.log(line_myChart);
      order_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日订单量变化趋势",
            left: "center",

            textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "销售额/元",
            itemStyle: {
              normal: {
                color: "#108EFF",
                lineStyle: {
                  color: "#108EFF"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    //客单价折线图
    per_sales() {
      var sales_myChart = this.echarts.init(
        document.getElementById("per_sales")
      );
     
      sales_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日客单价变化趋势",
            left: "center",

            textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "客单价/元",
            itemStyle: {
              normal: {
                color: "#F04964",
                lineStyle: {
                  color: "#F04964"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    //总用户数变化趋势
    total() {
      var total_myChart = this.echarts.init(document.getElementById("total"));
      // console.log(line_myChart);
      total_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,

            text: "今日总用户数变化趋势",
            left: "center",

            textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "总用户数/人",
            itemStyle: {
              normal: {
                color: "#FFBE61",
                lineStyle: {
                  color: "#FFBE61"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    //新增用户数变化趋势
    adduser() {
      var adduser_myChart = this.echarts.init(document.getElementById("adduser"));
    
      adduser_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,
            text: "今日新增用户数变化趋势",
            left: "center",

            textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "新增用户数/人",
            itemStyle: {
              normal: {
                color: "#3C8C0B",
                lineStyle: {
                  color: "#3C8C0B"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    },
    //成交用户折线图
    bargain() {
      var bargain_myChart = this.echarts.init(document.getElementById("bargain"));
     
      bargain_myChart.setOption({
        xAxis: {
          type: "category",
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"]
        },
        yAxis: {
          type: "value"
        },
        title: [
          {
            id: "statistic",
            right: 100,
            top: 10,
            width: 120,
            text: "今日成交用户数变化趋势",
            left: "center",
                   textStyle: {
              color: "#000000",
              "font-weight": 300,
              fontSize: 20
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "成交用户数/人",
            itemStyle: {
              normal: {
                color: "#9A64E3",
                lineStyle: {
                  color: "#9A64E3"
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
              opacity: "0.4"
            }
          }
        }
      });
    }
  },
  mounted() {
    this.line_ko();
    this.order_count();
    this.per_sales();
    this.total();
    this.adduser();
    this.bargain()
    //多个echarts图表进行自适应
    let _this = this;
    window.addEventListener("resize", function(event) {
      _this.line_myChart.resize();
      _this.order_myChart.resize();
      _this.sales_myChart.resize();
      _this.total_myChart.resize();
      _this.adduser_myChart.resize();

    });
  },
  created() {
    this.deviceStats();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
.gutter-box .ant-card {
  transition: all 0s;
}
.gutter-box .ant-card:hover {
  box-shadow: 0 10px 10px rgb(207, 227, 246);
  transform: translateY(-5%);
}
.gutter-box .ant-card-body p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
}
.gutter-box .ant-card-body p span:nth-of-type(1) {
  font-size: 1.2em;
  color: black;
}
.gutter-box .ant-card-body p span:nth-of-type(2) {
  font-size: 2.5em;
  color: rgb(39, 39, 39);
}
.gutter-box-four .ant-card-body p {
  display: flex;
  line-height: 25px;

  padding-top: 3px !important;
}
.gutter-box-four .ant-card-body p span:nth-of-type(1) {
  font-size: 1.2em;
  color: black;
}
.gutter-box-four .ant-card-body p span:nth-of-type(2) {
  font-size: 2.5em;
  color: rgb(39, 39, 39);
}
.gutter-box-four .ant-card-body p:nth-of-type(2) span:nth-of-type(1) {
  font-size: 1.2em;
  color: rgb(39, 39, 39);
}
.gutter-box-four .ant-card-body p:nth-of-type(2) span:nth-of-type(2) {
  font-size: 1.2em;
  color: rgb(39, 39, 39);
}
.ant-tabs-bar {
  border-bottom: none;
}

.extra-wrapper {
  line-height: 40px;
  padding-right: 24px;
}
.extra-item {
  display: inline-block;
  margin-right: 24px;
}
a {
  margin-left: 24px;
}
</style>
